<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .season-card {
            height: 120px;
            border-radius: 12px;
            background-size: cover;
            background-position: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .season-card:hover {
            transform: translateY(-5px);
        }
        .season-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
        }
        .nav-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e8f3ff;
            border-radius: 10px;
            margin-bottom: 8px;
            color: #0052d9;
        }
        .bottom-nav {
            border-top: 1px solid #eee;
            background: white;
            padding: 8px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        .bottom-nav-item.active {
            color: #0052d9;
        }
        .weather-card {
            border-radius: 12px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .recommend-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            background: white;
        }
        .recommend-img {
            height: 140px;
            object-fit: cover;
        }
        .tag {
            background-color: rgba(0,82,217,0.1);
            color: #0052d9;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 12px;
            margin-right: 6px;
        }
        .carousel {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            height: 160px;
            margin: 0 16px;
        }
        .carousel-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            background-size: cover;
            background-position: center;
        }
        .carousel-item.active {
            opacity: 1;
        }
        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
        }
        .carousel-indicator.active {
            background-color: white;
        }
        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
        }
        .location-dropdown {
            position: relative;
        }
        .location-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 120px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 20;
            margin-top: 8px;
            display: none;
        }
        .location-menu.active {
            display: block;
        }
        .location-item {
            padding: 10px 16px;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .location-item:last-child {
            border-bottom: none;
        }
        .location-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .video-preview {
            position: relative;
        }
        .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .panorama-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="pb-16"> <!-- 底部导航栏的空间 -->
        <!-- 顶部导航 -->
        <div class="flex items-center justify-between p-4">
            <div class="text-xl font-bold">贵州四季康养</div>
            <div class="flex items-center">
                <div class="location-dropdown mr-4">
                    <div class="flex items-center" onclick="toggleLocationMenu()">
                        <span class="mr-1">贵阳市</span>
                        <i class="t-icon t-icon-chevron-down text-xs"></i>
                    </div>
                    <div class="location-menu" id="locationMenu">
                        <div class="location-item active">贵阳市</div>
                        <div class="location-item">遵义市</div>
                        <div class="location-item">六盘水市</div>
                        <div class="location-item">安顺市</div>
                        <div class="location-item">黔东南州</div>
                    </div>
                </div>
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                    <i class="t-icon t-icon-search"></i>
                </div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="carousel mb-4">
            <div class="carousel-item active" style="background-image: url('https://images.unsplash.com/photo-1529822438134-3adce6a81a09')">
                <div class="carousel-caption">
                    <h3 class="text-lg font-bold">荔波小七孔 | 夏季避暑胜地</h3>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1567331711402-509c12c41959')">
                <div class="carousel-caption">
                    <h3 class="text-lg font-bold">平坝樱花园 | 春季赏花盛会</h3>
                </div>
            </div>
            <div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6')">
                <div class="carousel-caption">
                    <h3 class="text-lg font-bold">黄果树瀑布 | 壮观自然奇景</h3>
                </div>
            </div>
            <div class="carousel-indicators">
                <div class="carousel-indicator active"></div>
                <div class="carousel-indicator"></div>
                <div class="carousel-indicator"></div>
            </div>
        </div>

        <!-- 四季主题导航 -->
        <div class="px-4 py-3">
            <div class="grid grid-cols-2 gap-3">
                <div class="season-card" style="background-image: url('https://images.unsplash.com/photo-1490750967868-88aa4486c946')">
                    <div class="relative p-3 h-full flex flex-col justify-end">
                        <span class="text-white font-bold text-lg">春季康养</span>
                        <span class="text-white text-sm opacity-80">赏花、踏青、疗愈</span>
                    </div>
                </div>
                <div class="season-card" style="background-image: url('https://images.unsplash.com/photo-1519046904884-53103b34b206')">
                    <div class="relative p-3 h-full flex flex-col justify-end">
                        <span class="text-white font-bold text-lg">夏季康养</span>
                        <span class="text-white text-sm opacity-80">避暑、漂流、清凉</span>
                    </div>
                </div>
                <div class="season-card" style="background-image: url('https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6')">
                    <div class="relative p-3 h-full flex flex-col justify-end">
                        <span class="text-white font-bold text-lg">秋季康养</span>
                        <span class="text-white text-sm opacity-80">赏红叶、采摘、徒步</span>
                    </div>
                </div>
                <div class="season-card" style="background-image: url('https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d')">
                    <div class="relative p-3 h-full flex flex-col justify-end">
                        <span class="text-white font-bold text-lg">冬季康养</span>
                        <span class="text-white text-sm opacity-80">温泉、养生、冬韵</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快捷导航 -->
        <div class="px-4 py-3">
            <div class="grid grid-cols-5 gap-2 text-center">
                <div class="flex flex-col items-center">
                    <div class="nav-icon">
                        <i class="t-icon t-icon-map"></i>
                    </div>
                    <span class="text-xs">景点</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="nav-icon">
                        <i class="t-icon t-icon-shop"></i>
                    </div>
                    <span class="text-xs">购物</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="nav-icon">
                        <i class="t-icon t-icon-heart"></i>
                    </div>
                    <span class="text-xs">康养</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="nav-icon">
                        <i class="t-icon t-icon-ticket"></i>
                    </div>
                    <span class="text-xs">票务</span>
                </div>
                <div class="flex flex-col items-center">
                    <div class="nav-icon">
                        <i class="t-icon t-icon-discount"></i>
                    </div>
                    <span class="text-xs">优惠</span>
                </div>
            </div>
        </div>

        <!-- 天气与康养指数 -->
        <div class="px-4 py-3">
            <div class="weather-card p-3">
                <div class="flex justify-between items-center">
                    <div>
                        <h3 class="font-bold">贵阳市 · 晴</h3>
                        <p class="text-sm text-gray-500">今日最高气温28°C</p>
                    </div>
                    <div class="text-3xl">26°C</div>
                </div>
                <div class="mt-3 pt-3 border-t border-gray-100">
                    <h4 class="text-sm font-medium mb-2">今日康养指数</h4>
                    <div class="flex justify-between text-sm">
                        <div>
                            <div class="text-blue-600 font-medium">92</div>
                            <div class="text-xs text-gray-500">负氧离子</div>
                        </div>
                        <div>
                            <div class="text-green-600 font-medium">适宜</div>
                            <div class="text-xs text-gray-500">徒步强度</div>
                        </div>
                        <div>
                            <div class="text-orange-600 font-medium">中等</div>
                            <div class="text-xs text-gray-500">紫外线</div>
                        </div>
                        <div>
                            <div class="text-purple-600 font-medium">舒适</div>
                            <div class="text-xs text-gray-500">体感舒适度</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐景点 -->
        <div class="px-4 py-3">
            <div class="flex justify-between items-center mb-3">
                <h2 class="font-bold text-lg">今日推荐</h2>
                <span class="text-blue-600 text-sm">查看更多</span>
            </div>
            
            <div class="space-y-4">
                <!-- 推荐景点1 -->
                <div class="recommend-card">
                    <div class="video-preview">
                        <img src="https://images.unsplash.com/photo-1529822438134-3adce6a81a09" class="recommend-img w-full" alt="荔波小七孔">
                        <div class="video-play-btn">
                            <i class="t-icon t-icon-play"></i>
                        </div>
                        <div class="panorama-badge">
                            <i class="t-icon t-icon-360-degree mr-1"></i>
                            <span>全景</span>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-start">
                            <h3 class="font-bold">荔波小七孔</h3>
                            <div class="text-orange-500 font-medium">
                                <span class="text-lg">4.9</span>
                                <span class="text-sm">分</span>
                            </div>
                        </div>
                        <div class="flex mt-2">
                            <span class="tag">森林负氧</span>
                            <span class="tag">情绪调节</span>
                        </div>
                        <p class="mt-2 text-sm text-gray-600 line-clamp-2">拥有"地球腰带上的绿宝石"美誉，森林覆盖率高达97%，负氧离子含量极高。</p>
                        <div class="mt-2 flex justify-between items-center">
                            <div class="text-blue-600">¥<span class="text-xl font-bold">138</span><span class="text-sm">/人</span></div>
                            <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">立即预订</button>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐景点2 -->
                <div class="recommend-card">
                    <div class="video-preview">
                        <img src="https://images.unsplash.com/photo-1567331711402-509c12c41959" class="recommend-img w-full" alt="平坝樱花园">
                        <div class="video-play-btn">
                            <i class="t-icon t-icon-play"></i>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-start">
                            <h3 class="font-bold">平坝樱花园</h3>
                            <div class="text-orange-500 font-medium">
                                <span class="text-lg">4.8</span>
                                <span class="text-sm">分</span>
                            </div>
                        </div>
                        <div class="flex mt-2">
                            <span class="tag">舒缓身心</span>
                            <span class="tag">缓解压力</span>
                        </div>
                        <p class="mt-2 text-sm text-gray-600 line-clamp-2">亚洲最大的樱花园，拥有10万余株樱花树，春季盛开，漫天樱花如云似霞。</p>
                        <div class="mt-2 flex justify-between items-center">
                            <div class="text-blue-600">¥<span class="text-xl font-bold">69</span><span class="text-sm">/人</span></div>
                            <button class="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">立即预订</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="bottom-nav-item active">
            <i class="t-icon t-icon-home"></i>
            <span>首页</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-browse"></i>
            <span>发现</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-chat"></i>
            <span>消息</span>
        </div>
        <div class="bottom-nav-item">
            <i class="t-icon t-icon-user"></i>
            <span>我的</span>
        </div>
    </div>

    <script>
        // 轮播图自动切换
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-item');
        const indicators = document.querySelectorAll('.carousel-indicator');
        
        function showSlide(index) {
            slides.forEach(slide => slide.classList.remove('active'));
            indicators.forEach(indicator => indicator.classList.remove('active'));
            
            slides[index].classList.add('active');
            indicators[index].classList.add('active');
            currentSlide = index;
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }
        
        // 每3秒切换一次轮播图
        setInterval(nextSlide, 3000);
        
        // 点击指示器切换轮播图
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                showSlide(index);
            });
        });
        
        // 切换地区菜单
        function toggleLocationMenu() {
            const menu = document.getElementById('locationMenu');
            menu.classList.toggle('active');
        }
        
        // 点击地区切换
        const locationItems = document.querySelectorAll('.location-item');
        locationItems.forEach(item => {
            item.addEventListener('click', function() {
                locationItems.forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                document.querySelector('.location-dropdown span').textContent = this.textContent;
                toggleLocationMenu();
            });
        });
    </script>
</body>
</html> 